<template>
	<view class="home">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper_group" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<!-- 1 -->
			<swiper-item class="swiper-item">
				<home-recommend class="recommend" :height="scrollHeight"></home-recommend>
			</swiper-item>
			<!-- 2 -->
			<swiper-item class="swiper-item">
				2
			</swiper-item>
			<!-- 3 -->
			<swiper-item class="swiper-item">
				3
			</swiper-item>
			<!-- 4 -->
			<swiper-item class="swiper-item">
				4
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import homeRecommend from './home-recommend/index.vue' 
export default {
	data() {
		return {
			list: [{
				name: '推荐'
			}, {
				name: '分类'
			}, {
				name: '最新'
			}, {
				name: '专辑'
			}],
			current: 0,
			swiperCurrent: 0,
			scrollHeight: ''
		}
	},
	components: {
		homeRecommend
	},
	methods: {
		tabsChange(index) {
			this.swiperCurrent = index
		},
		transition(e) {
			let dx = e.detail.dx
			this.$refs.uTabs.setDx(dx)
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current)
			this.current = current
			this.swiperCurrent = current
		}
	},
	mounted() {
		let info = uni.createSelectorQuery().in(this).select('.swiper_group').boundingClientRect()
		info.exec(res => {
			this.scrollHeight = res[0].height
			console.log(this.scrollHeight)
		})
	}
}
</script>

<style lang="scss">
page {
	width: 100%;
	min-height: 100%;
	display: flex;
}
.home {
	flex: 1;
	display: flex;
	flex-direction: column;
	.swiper_group {
		flex: 1;
	}
}
</style>